<template>
	<view class="bg-white" style="height: fit-content">
		<scroll-view class="bg-white animation-fade" v-if="isReady">
			<uni-nav-bar  @clickLeft="handleback" left-icon="back" statusBar="true" title="卖书给岛上有家书店"></uni-nav-bar>
			
			<!-- 扫码 -->
			<view class="padding-top padding-bottom cu-card case no-card solids-bottom">
				<view class="cu-item shadow">
					<view class="flex">
						<view class=" text-center">
							<view class="text-bold text-black " style="font-size: x-large; margin-left: 55rpx;">1</view>
						</view>

						<view class="flex-twice ">
							<image src="https://ae01.alicdn.com/kf/Hacd9e87068bf449bb7ed4b6574a4dab1r.jpg" mode="widthFix" style="width: 300rpx; transform: scale(1.3);"
							 class=""></image>
						</view>

						<view class="flex-treble  text-right text-black padding-top padding-right-xl">
							<view class="margin-right" style="font-size: 40rpx;">手机扫码</view>
							<view class="margin-right" style="font-size: 40rpx;">看收购价</view>
							<view class="text-yellow text-sm cu-list margin-top-xl">
								<view class="cu-item margin-right" @click="show()">
									<text>什么书不收</text>
									<text :class="show_mes?'cuIcon-fold':'cuIcon-unfold'"></text>
								</view>
							</view>
						</view>
					</view>

					<view class=" text-sm text-black padding-lg text-content animation-fade" v-if="show_mes">
						<view class="action">
							<text class="cuIcon-title text-yellow"></text>
							不收有影响阅读的破损、污溃、老化、异味的书。
						</view>
						<view class="action">
							<text class="cuIcon-title text-yellow"></text>
							不收盗版、非卖品、非法出版物。
						</view>
					</view>


				</view>
			</view>

			<!-- 自提上门 -->
			<view class="padding-top padding-bottom cu-card case no-card solids-bottom">
				<view class="flex">
					<view class=" text-center">
						<view class="text-bold text-black " style="font-size: x-large; margin-left:55rpx;">2</view>
					</view>

					<view class="flex-twice ">
						<image src="https://ae01.alicdn.com/kf/H3ab72fd49cd0425e8e0e95edb10bb5a4d.jpg" mode="widthFix" style="width: 300rpx; transform: scale(1.3);"
						 class=""></image>
					</view>

					<view class="flex-treble  text-right text-black padding-top padding-right-xl">
						<view class="margin-right" style="font-size: 40rpx;">可自提</view>
						<view class="margin-right" style="font-size: 40rpx;">可上门</view>
						<view class="content  margin-right margin-top-xs text-gray" style="font-size: 19rpx;">
							<view>少于六本书的回收暂时仅支持自提</view>
							<view>不便之处敬请谅解</view>
						</view>
					</view>
				</view>
			</view>


			<!-- 付款 -->
			<view class="padding-top padding-bottom cu-card case no-card solids-bottom">
				<view class="flex">
					<view class=" text-center">
						<view class="text-bold text-black " style="font-size: x-large; margin-left: 55rpx;">3</view>
					</view>

					<view class="flex-twice ">
						<image src="https://ae01.alicdn.com/kf/Hf1b7bf23ee40409ba4ae9bda810d1601l.jpg" mode="widthFix" style="width: 300rpx; transform: scale(1.3);"
						 class=""></image>
					</view>

					<view class="flex-treble  text-right text-black padding-top-lg padding-right-xl">
						<view class="margin-right" style="font-size: 40rpx;">分类、审核</view>
						<view class="margin-right" style="font-size: 40rpx;">微信转账</view>
					</view>
				</view>
			</view>

			<view class="box text-center  margin-top-xl animation-shake">
				<view class="cu-bar btn-group padding-top">

					<button @click="handleScan" class="cu-btn bg-yellow shadow-blur round lg button-hover text-white">
						<text class="cuIcon-scan lg margin-right-sm"></text>
						扫码卖书</button>
				</view>
				<view class="cu-bar search padding-right-xl padding-left-xl">
					<view class="search-form round text-grey text-xs text-left">
						
						<input type="number" maxlength="13" @input="handleInput" class="padding-left" placeholder="手动输入 ISBN" placeholder-class="text-sm text-grey"></input>
						<button @click="handleSearch" class="cu-btn round solids" style="background-color: #E7E7E7;" >
							<text class="cuIcon-search"></text>
						</button>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {handleRequest} from '../../request/handleRequest.js';
	var _self;
	export default {
		data() {
			return {
				
				show_mes: false,
				mes_height: 0,
				isReady: false,
				input:''
			}
		},
		onLoad() {
			_self = this;
		},
		onReady() {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			setTimeout(function() {
				_self.isReady = true;
				uni.hideLoading();
			}, 1000)
		},

		methods: {
			
			handleScan(){
				uni.scanCode({
				    onlyFromCamera:true,
				    scanType:['barCode'],
				    success:(result) => {
						handleRequest(result.result);	
				    }
				});
			},
			
			handleInput(e){
				_self.input = e.detail.value;
				// console.log(_self.input);
			},
			
			handleSearch(){
				if(_self.input.length>0){
					
					handleRequest(this.input);
				}else{
					uni.showModal({
						title:'提示',
						content:'输入内容不能为空',
						mask:true,
						showCancel:false
					});
				}
			},
			
			handleback() {
				uni.navigateBack({
					delta: 1
				})
			},
			show() {
				_self.show_mes = !_self.show_mes;
				_self.show_mes ? _self.mes_height = 20 : 0;
			}
		}
	}
</script>

<style>

</style>
